<template>
    <div class="about" style="color: #292a2f">
        <h1>运营管理</h1>
        <input>

        <div class="module-list-wrap">
            <button class="left-icon icon" @click="leftMove">左箭头</button>
            <div class="module-list" ref="modulelist"
                :style="{ width: list.length * 100 + 'px', 'margin-left': xxx * 100 + 'px'}">
                <div v-for="(item, index) in list" :key="index"> 菜单{{ index }}</div>
            </div>
            <button class="right-icon icon" @click="rightMove">右箭头</button>
        </div>
    </div>
</template>
<script>
    export default {
        name: "about2",
        data() {
            return {
                list: [{},{},{},{},{},{},{},{},{},{},{},{}],
                xxx: 0,
            }
        },
        created() {
        },
        methods: {
            leftMove() {
                if (this.xxx < 0) {
                    this.xxx += 1;
                }
            },
            rightMove() {
                if (this.xxx > -(this.list.length + this.xxx)) {
                    this.xxx -= 1;
                }
            },
        }
    }
</script>
<style scoped>
    .module-list-wrap{
        display: flex;
        margin: 50px;
        position: relative;
        align-items: center;
        overflow: hidden;
    }

    .module-list{
        display: flex;
        width: 200px;
        overflow: hidden;
        padding: 0 70px;
    }

    .module-list div{
        width: 100px;
        padding: 15px;
        white-space:nowrap;
    }

    .icon{
        width: 70px;
        z-index: 2;
        min-width: 70px;
        max-width: 70px;
        position: absolute;
    }

    .left-icon{
        left: 0;
    }

    .right-icon{
        right: 0;
    }
</style>